<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="/res/layui/css/layui.css">
  <script type="text/javascript" src="/res/layui/layui.js"></script>
  <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="/js/vue-2.4.0.js"></script>
  <script type="text/javascript" src="/js/axios.min.js"></script>
  <script type="text/javascript" src="/js/checkLogin.js"></script>
  <script type="text/javascript" src="/js/localStorage.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="#">首页</a>
      </p>
      <div class="sn-quick-menu">
       <div class="login"><a href="login.html">登录</a></div>
        <div class="sp-cart"><a href="shopcart.html">购物车</a><span>2</span></div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="#" title="母婴商城">
            <img src="/res/static/img/logo.png">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate>
            <input type="demo.text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base datails-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="commodity.html" class="active">所有商品</a>
            <a href="buytoday.html">今日团购</a>
            <a href="information.html">母婴资讯</a>
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    <div class="data-cont-wrap w1200">
      <div class="crumb">
        <a href="javascript:;">首页</a>
        <span>></span>
        <a href="javascript:;">所有商品</a>
        <span>></span>
        <a href="javascript:;">产品详情</a>
      </div>
      <div class="product-intro layui-clear">
<!--        <input type="demo.text" style="display: none" name="skuId" th:value="${skuId}"/>-->
        <div class="preview-wrap">
          <a href="javascript:;"><img th:src="${images}" id="img"></a>
        </div>
        <div class="itemInfo-wrap" id="app">
          <div class="itemInfo">
            <div class="title">
              <h4>[[${title}]]</h4>
              <span><i class="layui-icon layui-icon-rate-solid"></i>收藏</span>
            </div>
            <div class="summary">
              <p class="reference"><span>参考价</span> <del>￥280.00</del></p>
              <p class="activity"><span>活动价</span><strong class="price"><i>￥</i>[[${price/100}]]</strong></p>
              <p class="address-box"><span>送&nbsp;&nbsp;&nbsp;&nbsp;至</span><strong class="address">江西&nbsp;&nbsp;南昌&nbsp;&nbsp;东湖区</strong></p>
            </div>
            <div class="choose-attrs">
              <div class="color layui-clear"><span class="title">颜&nbsp;&nbsp;&nbsp;&nbsp;色</span> <div class="color-cont"><span class="btn">白色</span> <span class="btn active">粉丝</span></div></div>
<!--              onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"-->
              <div class="number layui-clear"><span class="title">数&nbsp;&nbsp;&nbsp;&nbsp;量</span><div class="number-cont"><span @click="cut" class="cut btn">-</span><input v-model="num"  maxlength="4" type="" name="" value="1"><span @click="add" class="add btn">+</span></div></div>
            </div>
            <div class="choose-btns">
              <button @click="addCart" class="layui-btn  layui-btn-danger car-btn"><i class="layui-icon layui-icon-cart-simple"></i>加入购物车</button>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-clear">
        <div class="aside">
          <h4>热销推荐</h4>
          <div class="item-list">
            <div class="item">
              <img src="/res/static/img/details_img2.jpg">
              <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
            </div>
            <div class="item">
              <img src="/res/static/img/details_img2.jpg">
              <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
            </div>
            <div class="item">
              <img src="/res/static/img/details_img2.jpg">
              <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
            </div>
            <div class="item">
              <img src="/res/static/img/details_img2.jpg">
              <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
            </div>
            <div class="item">
              <img src="/res/static/img/details_img2.jpg">
              <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
            </div>
            <div class="item">
              <img src="/res/static/img/details_img2.jpg">
              <p><span>可爱宝宝粉色连体秋裤</span><span class="pric">￥99.00</span></p>
            </div>
          </div>
        </div>
        <div class="detail">
          <h4>详情</h4>
          <div class="item">
            <img src="/res/static/img/details_imgbig.jpg">
          </div>
        </div>
      </div>
    </div>
  </div>
  <script th:inline="javascript">
    //通过axios发送请求到购物车服务
    let vue=new Vue({
      el:"#app",
      data:{
        skuId:"",
        num:1,
        image:"",
        price:0,
      },
      methods:{
        cut(){
          if (this.num==1){
            alert("不能少于1!");
            return;
          }
          this.num--;
        },
        add(){
          if (this.num==5){
            alert("最大不能超过5!");
            return;
          }
          this.num++;
        },
        addCart(){
          var this_=this;
          //用户点击购买
          //设置允许携带以及接收cookie
          axios.defaults.withCredentials=true;
          //发送验证请求，如果不通过，就跳转到登录界面
          axios.post("http://api.shopping.com/auth/verify").
          then(function (res) {
            this_.flag=true;
            //验证成功,可以购买
            axios.put("http://api.shopping.com/cart/add/cart",{
              "skuId":this_.skuId,
              "num":this_.num
            }).then(function () {
              alert("添加购物车成功");
            }).catch(function () {
              alert("添加购物车失败");
            });
          }).catch(function () {
            alert("登录失败!");
          });
        },
      },
      created(){
        this.skuId=[[${skuId}]];
        this.image=[[${images}]];
        this.price=[[${price}]];
      }
    });
  </script>
<!--<script type="demo.text/javascript">-->
<!--  // layui.config({-->
<!--  //   base: '/res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录-->
<!--  // }).use(['mm','jquery'],function(){-->
<!--  //     var mm = layui.mm,$ = layui.$;-->
<!--  //     var cur = $('.number-cont input').val();-->
<!--  //     $('.number-cont .btn').on('click',function(){-->
<!--  //       if($(this).hasClass('add')){-->
<!--  //         cur++;-->
<!--  //-->
<!--  //       }else{-->
<!--  //         if(cur > 1){-->
<!--  //           cur&#45;&#45;;-->
<!--  //         }-->
<!--  //       }-->
<!--  //       $('.number-cont input').val(cur)-->
<!--  //     })-->

<!--  // });-->
<!--</script>-->

</body>
</html>